<%--
  Created by IntelliJ IDEA.
  User: 杜
  Date: 2022/6/16
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <style>
        <%--        body样式--%>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            background:#000;
            overflow:hidden;
        }
        #container {
            width: 100%;
            height: 100%;
        }





        /*form表单*/
        .layui-form{
            width: 100%;
            margin: 0;
            padding: 0;

        }
        .containerSon{
            width: 420px;
            height: 280px;
            min-height: 280px;
            max-height: 320px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, 0.11);
            font-size: 16px;
        }
        .topic{
            text-align: center;
            color: #ffffff;
            font-size: 25px;
            font-weight: normal;
        }

        .my-form-item{
            margin:25px -50px;
            background-color: rgba(0, 0, 0, 0);
        }

        .my-input{
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            color: white;
            background-color: rgba(255, 255, 255, 0);
            border: rgba(255, 255, 255, 0.2) 2px solid;
            text-align: center;
        }

        .layui-btn{
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(255, 255, 255, 0.2) 2px solid;
        }


    </style>
</head>
<body>
<div id="container">

</div>
<script src='${pageContext.request.contextPath}/lib/js/three.min.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/CopyShader.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/EffectComposer.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/FilmPass.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/FilmShader.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/ShaderPass.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/RenderPass.js'></script>
<script src="${pageContext.request.contextPath}/lib/js/index.js"></script>



            <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="containerSon">
                    <p class="topic">心理测试</p>
                    <div class="layui-form-item my-form-item">
                        <div class="layui-input-block">

                            <input class="layui-input my-input " type="text" name="name" lay-verify="required|myName" placeholder="请输入用户名" autocomplete="off" value="张三">

                        </div>
                    </div>
                    <div class="layui-form-item my-form-item">
                        <div class="layui-input-block">
                            <input class="layui-input my-input" type="text" name="phone" lay-verify="required|phone|number" placeholder="请输入手机号" autocomplete="off" value="13562356984">
                        </div>
                    </div>
                    <div class="layui-form-item my-form-item">
                        <div class="layui-input-block">
                            <input class="layui-input my-input" type="text" name="test_code"  placeholder="请输入邀请码" autocomplete="off" >
                        </div>
                    </div>
                    <div class="layui-form-item my-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="login">开始测试</button>
                        </div>
                    </div>
                </div>
            </form>


<script>
    layui.use(['form','layer','jquery'],function (){
        var form = layui.form;
        var layer = layui.layer;
        var $= layui.jquery;

        // //离子扩散
        // $(document).ready(function(){
        //     $('.layui-container').particleground({
        //         dotColor:'#7ec7fd',
        //         lineColor:'#7ec7fd'
        //     });
        // });
        //进行登录操作
        form.on('submit(login)', function (data) {
            // console.log("denglu")
            // console.log(data)
            /*console.log(data.field)*/
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.phone == '') {
                layer.msg('密码不能为空');
                return false;
            }
            $.ajax({
                url:"${pageContext.request.contextPath}/testerLogin/userTestLogin.do",
                type: "POST",
                dataType:"JSON",
                data:data.field,
                success:function (ret) {
                    if (ret.code==0){
                        console.log(ret.data)
                        window.location.href="${pageContext.request.contextPath}"+ret.data
                    }
                    layer.msg(ret.msg)
                }
            })
            // layer.msg('登录成功')
            return false;
        });
    })

</script>
</body>
</html>
